<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎页面</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<link rel="stylesheet" href="webjars/layui/2.4.5/css/layui.css">
<script type="text/javascript" src="webjars/layui/2.4.5/layui.js"></script>
<script src="webjars/jquery/1.11.1/jquery.js"></script>

<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.css">
<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap-theme.css">
<link rel="stylesheet" href="webjars/bootstrap-table/1.9.1-1/bootstrap-table.css">
<link rel="stylesheet" href="webjars/bootstrap-select/2.0.0-beta1/dist/css/bootstrap-select.css">
<link rel="stylesheet" href="webjars/bootstrapvalidator/0.5.2/css/bootstrapValidator.css">

<script type="text/javascript" src="webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
<script type="text/javascript" src="webjars/bootstrap-select/2.0.0-beta1/dist/js/bootstrap-select.js"></script>
<script type="text/javascript" src="webjars/bootstrap-select/2.0.0-beta1/dist/js/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript" src="webjars/bootstrapvalidator/0.5.2/js/bootstrapValidator.js"></script>
<!-- bootstrap表格js -->
<script type="text/javascript" src="webjars/knockout/3.4.2/knockout.js"></script>
<script type="text/javascript" src="webjars/knockout-mapping/2.4.1/knockout.mapping.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.9.1-1/bootstrap-table.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.9.1-1/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="webjars/bootbox/4.4.0/bootbox.js"></script>
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.table.xzy.js"></script>
<!-- 密码可见 -->
<script src="static/bootstrap-3.3.7-dist/js/bootstrap-show-password.js"></script>
<style type="text/css">
.material-icons{
		font-size: 20px;
	}
	.input-group-addon{
		padding: 0px 12px;
		padding-top: 6px;
	}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">图书借阅系统</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item layui-this"><a href="#" onclick="pageView('book/bookAll')">所有图书</a></li>
      <li class="layui-nav-item"><a href="#" onclick="pageView('borrowRecord/recordAll')">借书记录</a></li>
      <li class="layui-nav-item"><a href="#" onclick="pageView('reader/readerAll')">查看个人信息</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="static/img/main.jpg" class="layui-nav-img">
         <span sec:authentication="principal.name"></span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="#" data-toggle="modal" data-target="#myModal">修改密码</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="logout">退出</a></li>
    </ul>
  </div> 
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;" id="home">
    
    </div>
  </div>
   
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h3 class="modal-title" id="myModalLabel" >修改密码</h3>
	    </div> 
		<form id="defaultForm" class="form-horizontal bv-form cmxform">
		    <div class="modal-body">
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">旧密码:</label>
						<div class="col-sm-8">
						<input  id="password" 
								data-toggle="password"
								data-placement="after"
								class="form-control"
								type="password"
								placeholder="原密码"
								data-eye-class="material-icons"
								data-eye-open-class="visibility"
								data-eye-close-class="visibility_off"
								data-eye-class-position-inside="true"
								data-message="点击隐藏或显示密码"
								required></div>
						<div><label id="account-error" class="error col-lg-offset-4" for="account"></label></div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">新密码:</label>
						<div class="col-sm-8">
						<input  id="password1" 
								data-toggle="password"
								data-placement="after"
								class="form-control"
								type="password"
								placeholder="新密码"
								data-eye-class="material-icons"
								data-eye-open-class="visibility"
								data-eye-close-class="visibility_off"
								data-eye-class-position-inside="true"
								data-message="点击隐藏或显示密码"
								required></div>
						<div><label id="account-error" class="error col-lg-offset-4" for="account"></label></div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">确认密码:</label>
						<div class="col-sm-8">
						<input  id="password2" 
								data-toggle="password"
								data-placement="after"
								class="form-control"
								type="password"
								placeholder="确认密码"
								data-eye-class="material-icons"
								data-eye-open-class="visibility"
								data-eye-close-class="visibility_off"
								data-eye-class-position-inside="true"
								data-message="点击隐藏或显示密码"
								required></div>
						<div><label id="account-error" class="error col-lg-offset-4" for="account"></label></div>
					</div>
				</div>
				  
	     	<div class="modal-footer">
	       		<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> 关闭</button>
	        	<button type="button" class="btn btn-primary" onclick="changePwd1()"><span class="glyphicon glyphicon-log-in"></span> 提交</button>
	     	</div>
		</form>
		</div>
	    </div>
	    
	  </div>
</div>
<script>
//JavaScript代码区域
pageView("book/bookAll");
layui.use('element', function(){
  var element = layui.element;
  
});

function pageView(url){
	$("#home").load(url);
}

bootbox.setDefaults({
	locale:'zh_CN',		//设置字符集
	size: 'small',		//设置大小
	title:'提示'			//标题提示
});
</script>
<script type="text/javascript">
function pwdupdata(str){
	$.post('password', {password: str}, function(data){
		if(!data){
			$("#account-error").html("原密码输入错误！");
		}else{
			$("#account-error").html("");
		}
	});
}

function fun_1(str){
	if(str == "" || str == null){
		$("#account-error1").html("请输入新密码！");
	}else{
		$("#account-error1").html("");
	}
}

function fun_2(str){
	if(str == "" || str == null){
		$("#account-error2").html("请再次输入新密码！");
	}else{
		$("#account-error2").html("");
	}
}

function changePwd1(){
	var possword = $("#password").val();
	var possword1 = $("#password1").val();
	var possword2 = $("#password2").val();
	if(possword == "" || possword == null){
		$("#erre_pwd").html("请输入原密码！");
	}else {
		$.post('password', {password: possword}, function(data){
			if(!data){
				$("#account-error").html("原密码输入错误！");
			}else{
				if(possword1 == "" || possword1 == null){
					$("#account-error1").html("请输入新密码！");
				}else if(possword2 == "" || possword2 == null){
					$("#account-error2").html("请再次输入新密码！");
				}else if(possword1 != possword2){
					$("#account-error2").html("两次密码输入不一致！");
				}else{
					$.post('changePwd1', {password: possword1}, function(data){
						if(!data){
							bootbox.alert("修改失败！");
						}else{
							bootbox.alert({
							    buttons: {
								   ok: {
									    label: '确定',
									    className: 'btn btn-primary'
								    }
							    },
							    message: '修改成功！',
							    callback: function() {
							    	window.location.href="logout";
							    },
							    title: "提示",
						    });
						}
					});
				}
			}
		});
	}
}
</script>
</body>
</html>